<template>
  <div class="idc_box">
    <Row type="flex" justify="center">
      <Col span="20">
        <div
          class="idc_main"
          :class="{color1:iscolor1==index,color2:iscolor2==index,color3:iscolor3==index,color4:iscolor4==index}"
        >
          <div class="idc_triangle"></div>
          <Row type="flex" justify="center" align="bottom">
            <Col span="8" class="idc_text">
              <Row>{{title}}</Row>
              <Row>
                <h3>{{content}}</h3>
              </Row>
            </Col>
            <Col span="4">
              <div class="idc_icon_box">
                <Icon :type="iconName" class="idc_icon" />
              </div>
            </Col>
          </Row>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "idcCard",
  props: {
    //   标题
    title: {
      type: String,
      default: function() {
        return "风险等级";
      }
    },
    content: {
      type: String,
      default: function() {
        return "危害期";
      }
    },
    iconName: {
      type: String,
      default: function() {
        return "ios-analytics";
      }
    },
    index: {
      type: String,
      default: function() {
        return "color2";
      }
    }
  },
  computed() {
    // boxColor: function changColor() {
    //   var _this = this;
    //   return (
    //     "linear-gradient(to bottom right," +
    //     _this.colorList[0] +
    //     "," +
    //     _this.colorList[1] +
    //     ")"
    //   );
    // }
  },
  data() {
    return {
      //   classObj: {
      //     color1: true,
      //     color2: 1,
      //     color3: 2,
      //     color4: 3
      //   }
      iscolor1: "color1",
      iscolor2: "color2",
      iscolor3: "color3",
      iscolor4: "color4"
    };
  },
  methods: {}
};
</script>

<style scoped>
.idc_box {
  padding: 0 5px 0;
}
.idc_main {
  border-radius: 0px;
  width: 100%;
  position: relative;
  padding: 10px 0;
}
.color1 {
  background-image: linear-gradient(to bottom right, #79a5ff, #2067fa);
}
.color2 {
  background-image: linear-gradient(to bottom right, #797cff, #8019ff);
}
.color3 {
  background-image: linear-gradient(to bottom right, #ffac29, #ff3e3e);
}
.color4 {
  background-image: linear-gradient(to bottom right, #7786fc, #2e44f0);
}
.idc_icon_box {
  background: rgba(255, 255, 255, 0.301);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: white;
  position: relative;
  font-size: 50px;
}
.idc_triangle {
  width: 0;
  height: 0;
  border-top: 15px solid #fdfdfd;
  border-right: 15px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.idc_text {
  color: white;
}
.idc_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
